import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
//import Using ES6 syntax
import WeUI from 'react-weui';
//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/Invite.css';
import $ from 'jquery';
import EXIF from '../../../assets/js/exif.js';
const {
    Cells,
    Cell,
    CellHeader,
    CellBody,
    CellFooter,
    Toptips,
    Input,
    TextArea,
    Picker,
    CellsTitle,
    Dialog,
    ButtonArea,
    Button,
    Toast
} = WeUI;
//算高
let screenWidth = $(window).width();
let screenHeight = $(window).innerHeight();
let baseFontSize = 10 * screenWidth / 375;
export default class InviteStaffSubmit  extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            showToptips: false,
            showLoading:true,
            showToast: false,
            toastTimer: null,
            topTipsMsg: "服务器错误！",
            showDialog: false,
            teamInfo:{},
            image:null,
            inviteId:this.props.location.query.inviteId
        };
    }

    showToast() {
        this.setState({showToast: true, showLoading: false});
        this.state.toastTimer = setTimeout(() => {
            this.setState({showToast: false});

        }, 2000);
    }

    showWarn(error) {
        this.setState({showToptips: true,topTipsMsg:error, showLoading: false});
        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() { //组件即将被插入
        let self = this;
        fetch(getHost() + "/team/group/invitation/"+this.state.inviteId+"",{
            method: 'GET',
            credentials: 'include'
        }).then(response => response.json())
            .then(d => {
                if (d.success) {
                    this.setState({teamInfo:d.data,showLoading:false})
                } else {
                    self.showWarn(d.error.message);
                }
            });
    }
    LeftClick() {

    }

    //确认加入
    confirmAdd(){
        let  name = $("#name").val();
        let  Phone = $("#Phone").val();
        if(!name){
            this.showWarn("访客姓名不能为空!");
            return;
        }
        if(!Phone){
            this.showWarn("访客电话不能为空!");
            return;
        }
        let reg = /^1[0-9]\d{9}$/;
        if (!reg.test(Phone)){
            this.showWarn("请输入正确的电话!");
            return;
        }
        let self = this;
        let fromData = new FormData();
        fromData.append("name", name);
        fromData.append("phone", Phone);
        fetch(getHost() + "/team/group/user/" + this.state.teamInfo.teamGroupId, {
            method: 'POST',
            credentials: 'include',
            body: fromData
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.hash = "/InviteJoinSuccess";
                } else {
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
                self.showWarn("服务器错误！");
        });

    }
    render() {
        let remainHeight = screenHeight - (5.2+ 2.7) * baseFontSize  + "px";
        return (
            <div>
                <NavigationBar Title="员工邀请" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <div className="invite_content_box" style={{height:remainHeight}}>
                    <CellsTitle>请输入员工信息</CellsTitle>
                    <Cells style={{background: "white"}}>
                        <Cell>
                            <CellBody style={{height: "2.4rem"}}>
                                <div className="invite_title">姓名</div>
                                <Input className="invite_value" id="name" placeholder="请输入员工姓名"
                                       defaultValue={""}/>
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell>
                            <CellBody style={{height: "2.4rem"}}>
                                <div className="invite_title">电话</div>
                                <Input className="invite_value" type="number"  id="Phone" placeholder="请输入员工电话" maxLength="11"
                                       defaultValue={""}/>
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell>
                            <CellBody style={{height: "2.4rem"}}>
                                <div className="invite_title">企业名称</div>
                                <div className="invite_value" id="companyName">{this.state.teamInfo.teamName}</div>
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell>
                            <CellBody style={{height: "2.4rem"}}>
                                <div className="invite_title">企业部门</div>
                                <div className="invite_value">{this.state.teamInfo.teamGroupIdName}</div>
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                    </Cells>
                    <div className="userAccount_tip">电话将作为你的登录账号，一旦确认不可修改，请谨慎操作!</div>
                </div>
                <div className="invite_button_box">
                    <ButtonArea direction="horizontal">
                        <Button  onClick={this.confirmAdd.bind(this)}>确认加入</Button>
                    </ButtonArea>
                </div>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toast icon="success-no-circle" show={this.state.showToast}>添加成功</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}